<!DOCTYPE html>
<html lang="en-us">
    <head><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='hugo&#43;github:pages，使用hugo搭建个人主页，并将其部署在Github上'><title>基于hugo搭建个人主页</title>

<link rel='canonical' href='https://aboil.github.io/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/'>

<link rel="stylesheet" href="/scss/style.min.css"><meta property='og:title' content='基于hugo搭建个人主页'>
<meta property='og:description' content='hugo&#43;github:pages，使用hugo搭建个人主页，并将其部署在Github上'>
<meta property='og:url' content='https://aboil.github.io/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/'>
<meta property='og:site_name' content='Jianbiao Li'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:tag' content='hugo' /><meta property='article:tag' content='个人主页' /><meta property='article:published_time' content='2020-11-16T17:09:51&#43;08:00'/><meta property='article:modified_time' content='2020-11-16T17:09:51&#43;08:00'/>
<meta name="twitter:title" content="基于hugo搭建个人主页">
<meta name="twitter:description" content="hugo&#43;github:pages，使用hugo搭建个人主页，并将其部署在Github上">
    </head>
    <body class="">
        <div class="container flex on-phone--column align-items--flex-start extended article-page with-toolbar">
            <aside class="sidebar left-sidebar sticky">
    <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="切换菜单">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>

    <header class="site-info">
        
            <figure class="site-avatar">
                

                
                    
                    <img src="/img/aboil_profile_hu9fc8ece322a10b3597915a7c79112288_108526_300x300_resize_q75_box.jpg" width="300"
                        height="300" class="site-logo" loading="lazy" alt="Avatar">
                

                <span class="emoji">🍥</span>
            </figure>
        
        <h1 class="site-name"><a href="https://aboil.github.io/">Jianbiao Li</a></h1>
        <h2 class="site-description">The harder, the more fortunate.</h2>
    </header>

    <ol class="menu" id="main-menu">
        
        
        

        <li >
            <a href='/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="5 12 3 12 12 3 21 12 19 12" />
  <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
  <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>



                
                <span>Home</span>
            </a>
        </li>
        
        

        <li >
            <a href='/about'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>



                
                <span>About</span>
            </a>
        </li>
        
        

        <li >
            <a href='/archives'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-archive" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <rect x="3" y="4" width="18" height="4" rx="2" />
  <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
  <line x1="10" y1="12" x2="14" y2="12" />
</svg>



                
                <span>Archives</span>
            </a>
        </li>
        
        

        <li >
            <a href='/search'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="10" cy="10" r="7" />
  <line x1="21" y1="21" x2="15" y2="15" />
</svg>



                
                <span>Search</span>
            </a>
        </li>
        
    </ol>
</aside>
            <main class="main full-width">
    <div id="article-toolbar">
        <a href="https://aboil.github.io/" class="back-home">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="15 6 9 12 15 18" />
</svg>



            <span>Back</span>
        </a>
    </div>

    <article class="main-article">
    <header class="article-header">

    <div class="article-details">
    
    <header class="article-category">
        
            
                <a href="/categories/%E6%B8%B8%E6%89%8B%E5%A5%BD%E9%97%B2/">游手好闲</a>
            
        
    </header>
    

    <h2 class="article-title">
        <a href="/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/">基于hugo搭建个人主页</a>
    </h2>

    
    <h3 class="article-subtitle">
        hugo&#43;github:pages，使用hugo搭建个人主页，并将其部署在Github上
    </h3>
    <footer class="article-time">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



        <time class="article-time--published">Nov 16, 2020</time>
    </footer></div>
</header>

    <section class="article-content">
    <p>开始前的准备</p>
<blockquote>
<ul>
<li>
<p>安装hugo	（下面有介绍）</p>
</li>
<li>
<p>安装配置好git</p>
</li>
<li>
<p>准备好github账号</p>
</li>
<li>
<p>Markdown编辑器：如Typora</p>
</li>
</ul>
</blockquote>
<h2 id="1安装hugo">1、安装Hugo</h2>
<p>hugo算是免安装的，简单来说就行下载安装包，解压后，将其主程序所在的路径加到环境变量中即可。</p>
<ul>
<li>安装包下载地址： <a class="link" href="https://github.com/gohugoio/hugo/releases"  target="_blank" rel="noopener"
    >GitHub 仓库</a> 找到相应版本下载即可。我使用的是 <a class="link" href="https://github.com/gohugoio/hugo/releases/download/v0.78.2/hugo_extended_0.78.2_Windows-64bit.zip"  target="_blank" rel="noopener"
    >hugo_extended_0.78.2_Windows-64bit.zip</a> 这个版本。下载解压后，将其主程序所在的路径添加到 Windows 的系统环境变量的 PATH 中即可，不需安装。</li>
<li>验证：在cmd窗口中输入：<code>hugo version</code>，会出现一行类似：Hugo Static Site Generator v0.78.2/extended windows/amd64 BuildDate: unknown 就表明安装正确。</li>
</ul>
<p>Hugo官网： <a class="link" href="https://gohugo.io/"  target="_blank" rel="noopener"
    >https://gohugo.io</a>
Hugo中文文档： <a href="https://www.gohugo.org/">https://www.gohugo.org/</a></p>
<h2 id="2创建站点">2、创建站点</h2>
<p>在工作目录下按下右键，选择右键菜单中的 <code>Git Bash Here</code>，创建一个名为 <code>myblogsite</code> 的站点，输入以下指令：</p>
<pre><code>$ hugo new site myblogsite
$ cd myblogsite
</code></pre><h2 id="3添加主题themes">3、添加主题Themes</h2>
<p>hugo有很多主题模板，可以下载一个，地址为：<a class="link" href="https://themes.gohugo.io/"  target="_blank" rel="noopener"
    >https://themes.gohugo.io/ </a> ，这里我选择的是<code>Stack</code> 主题（<a class="link" href="https://themes.gohugo.io/hugo-theme-stack/"  target="_blank" rel="noopener"
    >地址</a>）。</p>
<p>用git命令将主题下载到 <code>myblogsite/themes/hugo-theme-stack/</code>目录下：</p>
<pre><code>$ git clone https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
</code></pre><p>或者直接下载下来，将其解压到<code>myblogsite/themes/hugo-theme-stack/</code>目录下也可以。</p>
<p>用下载主题里的<code>myblogsite\themes\hugo-theme-stack\exampleSite\config.toml</code>配置文件替换根目录下<code>myblogsite\config.toml</code>文件</p>
<p>设置config.toml里属性<code>theme: &quot;hugo-theme-stack&quot;</code></p>
<p>==tips：==如果用的也是我这个主题，要注意仔细阅读这个主题的<a class="link" href="https://www.notion.so/85e09d87a330450796bb4a982ad9ee54"  target="_blank" rel="noopener"
    >说明文档</a>。</p>
<h2 id="4创建博客">4、创建博客</h2>
<p>在站点的根目录下，这里是<code>myblogsite/</code>使用以下命令：</p>
<pre><code>$ hugo new post/index.md
</code></pre><p>创建的index.md文档路径是<code>myblogsite/content/post/index.md</code></p>
<p>用Typora编辑器打开该<code>index.md</code>文档，将下面代码重新写在<code>index.md</code>文档中：</p>
<div class="highlight"><pre class="chroma"><code class="language-markdown" data-lang="markdown">+++
author = &#34;aboil&#34;
title = &#34;我的测试&#34;
date = 2020-11-16T15:38:53+08:00
description = &#34;该博客的摘要&#34;
categories = [
    &#34;Test&#34;
]
tags = [
    &#34;emoji&#34;,
]
image = &#34;test01.jpg&#34;
math = true
+++

正文部分
</code></pre></div><p>其中：</p>
<ul>
<li>
<p><code>date</code> 指定的是日期</p>
</li>
<li>
<p><code>categories</code> 指定的是该博文的所属分类，多个要用逗号隔开</p>
</li>
<li>
<p><code>tags</code> 指定的是该博文的标签，多个要用逗号隔开</p>
</li>
<li>
<p><code>image</code> 指定的是该博文的预览图</p>
</li>
<li>
<p><code>math</code> 如果本文中插入的有数学公式，可以设置该字段为<code>true</code>，</p>
</li>
</ul>
<h2 id="5本地调试">5、本地调试</h2>
<p>在站点根目录下<code>myblogsite/</code>执行下面指令</p>
<pre><code>$ hugo server -t hugo-theme-stack --buildDrafts
</code></pre><p>其中<code>hugo-theme-stack</code>是自己下载的主题的名字</p>
<p><figure>
		<a href="/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/index.assets/image-20201116195913238.png" data-size="983x462">
			<img srcset="/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/index.assets/image-20201116195913238_hud191d88459077d037d31b0b13a2544e5_44792_480x0_resize_box_2.png 480w, /p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/index.assets/image-20201116195913238_hud191d88459077d037d31b0b13a2544e5_44792_1024x0_resize_box_2.png 1024w"
				src="/p/%E5%9F%BA%E4%BA%8Ehugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/index.assets/image-20201116195913238.png" width="983" height="462" loading="lazy"
				alt="&nbsp;">
		</a>
		
	</figure></p>
<p>浏览器中访问：<code>localhost:1313/ </code>即可</p>
<h2 id="6部署到github上">6、部署到github上</h2>
<h3 id="创建github仓库">创建github仓库</h3>
<p>新建一个github仓库，设置为<code>public</code>,仓库名与账号同名。如你的github名为abc，则将该仓库命名为<code>abc.github.io</code>，</p>
<h3 id="部署">部署</h3>
<p>将站点部署到<code>abc.github.io</code>仓库中</p>
<p>将根目录下config.toml文件中baseURL改为<code>https://abc.github.io/</code></p>
<p>在站点根目录执行<code>hugo</code>命令生成<code>/public</code>文件夹。public下存放的就是所有静态页面，只需要把public目录里面的文件<code>push</code>到你的仓库就好</p>
<pre><code>$ hugo --theme=hugo-theme-stack --baseUrl=&quot;https://abc.github.io/&quot; --buildDrafts
</code></pre><p>该命令后，站点目录下会生成一个public文件夹，下面只需要将public文件夹push到abc.github.io仓库中即可</p>
<pre><code># 进入public文件夹内
$ cd public/
$ git init
$ git add .
$ git commit -m &quot;描述信息，如：创建我的个人主页&quot;

# 第一次需要与远程项目建立链接：
$ git remote add origin https://github.com/aboil/aboil.github.io.git

# 直接 git push 不行的话，就用下面这个
$ git push -u origin master	
</code></pre><p>之后只需要访问网址<code>https://abc.github.io</code>即可</p>
<p>__<code>tips:</code>__如果还是没看懂，可以在B站上找个教学视频看看，我当时看了这个：<a class="link" href="https://www.bilibili.com/video/BV1q4411i7gL?from=search&amp;seid=1886274117294683067"  target="_blank" rel="noopener"
    >B站-手把手教你从0开始搭建自己的个人博客 |第二种姿势 | hugo</a></p>

</section>


    <footer class="article-footer">
    
    <section class="article-tags">
        
            <a href="/tags/hugo/">hugo</a>
        
            <a href="/tags/%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/">个人主页</a>
        
    </section>


    
    <section class="article-copyright">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>



        <span>Licensed under CC BY-NC-SA 4.0</span>
    </section>
    </footer>

    
</article>

    <aside class="related-contents--wrapper">
    
    
        <h2 class="section-title">相关文章</h2>
        <div class="related-contents">
            <div class="flex article-list--tile">
                
                    
<article class="">
    <a href="/p/%E8%A7%A3%E5%86%B3vs-code%E5%AE%89%E8%A3%85code-runner%E6%8F%92%E4%BB%B6%E5%90%8E%E8%BE%93%E5%87%BA%E7%AA%97%E5%8F%A3%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81%E9%97%AE%E9%A2%98python/">
        
        

        <div class="article-details">
            <h2 class="article-title">解决VS Code安装Code Runner插件后，输出窗口中文乱码问题（Python）</h2>
        </div>
    </a>
</article>
                
            </div>
        </div>
    
</aside>


    
        
    <div class="disqus-container">
    <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "hugo-theme-stack" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>

<style>
    .disqus-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }
</style>


    

    <footer class="site-footer">
    <section class="copyright">&copy; 2021 Jianbiao Li</section>
    <section class="powerby">
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="1.1.0">Stack</a></b> designed by
        <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
    </section>
</footer>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
            </main>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"
    integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g=" crossorigin="anonymous"></script><script type="text/javascript" src="/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>
<link rel="stylesheet" href="/css/highlight/light.min.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/css/highlight/dark.min.css" media="(prefers-color-scheme: dark)">

    </body>
</html>
